<template>
  <div class="login">
    <van-form @submit="onSubmit">
  
    <input type="file"@change="updataImg" >
    <img
        width="100"
        height="100"
        alt=""
        :src="imgUrl"
        class="avatar"
        />
  <van-cell-group inset>
    <van-field
      v-model="username"
      name="userName"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="password"
      type="password"
      name="password"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
     <van-field
      v-model="nickName"
      type="password"
      name="nickName"
      label="昵称"
      placeholder="昵称"
      :rules="[{ required: true, message: '请填写昵称' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit">
      提交
    </van-button>
  </div>
</van-form>

  </div>
</template>

<script>
import {uploadFiles , register} from '@/api/user';
export default {
  data() {
    return {
        imgUrl:"",
        username:"",
        password:"",
        nickName:"",
    };
  },
  computed: {},
  watch: {},
  methods: {
    //图片上传
   async updataImg(e){
      let file = e.target.files[0];
      console.log(file);
      let params = new FormData();
      params.append("file",file);
      const res = await uploadFiles(params);
      console.log(res);
      this.imgUrl = "http://lanlianhua.work:3009"+res.info
    },

   
    //  提交
   
   async onSubmit(val){
      console.log(val);
      
      const res = await register({...val,avatar:this.imgUrl});
      console.log(res);
      if(res.code =="success"){
        //  跳转登录
        this.$router.push("/login");
      }
   },
    
  },
  created() {},
  mounted() {},
  components: {},
};
</script>
<style scoped></style>
